<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>01layout 布局</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	<!--ztree  -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
	<!-- <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> 上面有了 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
	
	<!--创建属性结构  -->
	<script type="text/javascript">
		var setting={};  //数的所有属性使用默认
		var zNodes=[
		           {name:'节点一',children:[
		                                 {name:'节点11',children:[
		                                                        {name:'节点11.1'},
		                                                        {name:'节点11.2'}
		                                                        ]},
		                                 {name:'节点12'}
		                                 ]},
		           {name:'节点二'},
		           {name:'节点三'}
		           ];
		
		/* 加载节点 */
		$(function() {
			$.fn.zTree.init($("#mytree"), setting, zNodes);
		});
	</script>
</head>
<body class="easyui-layout">
	<!--每个div是一个区域  -->	
	<div data-options="region:'north',title:'xxx管理系统'" style="height: 100px">北部区域</div>
	<div data-options="region:'west',title:'系统菜单'" style="width: 200px">
		<!-- 折叠面版 -->
		<div class="easyui-accordion" data-options="fit:true">
			<div data-options="iconCls:'icon-add'" title="面板一">
				<script type="text/javascript">
					function addTabs() {
						$("#tabs").tabs("add",{
							iconCls:'icon-help',
							closable:true,
							title:'百度',
							content:'<iframe frameborder="0" height="100%" width="100%"  src="http://www.baidu.com"></iframe>'
						});
					}
				</script>
				
				<a onclick="addTabs();" id="addbaidu" class="easyui-linkbutton">百度</a>
			</div>
			
			<div title="面板二">
				<ul id="mytree" class="ztree"></ul>
			</div>
			
			<div title="面板三">
				<!--使用 简单 json 树 -->
				<script type="text/javascript">
				function onClick(event, treeId, treeNode, clickFlag) {
					// 定义 click方法
					//alert(treeNode.name);  // treeNode.name显示 节点的名字
					var page=treeNode.page;  // 获得选中的page属性值  没有page为 undefined;
					
					if(page !=undefined){
						// 当前选项卡是否存在 
						var ex=$("#tabs").tabs("exists",treeNode.name);
						if(ex){
							// 返回ex=true  选中page项  
							$("#tabs").tabs("select",treeNode.name);
						}else{
							// 没有选中
							// 动态添加选项卡
							$("#tabs").tabs("add",{
								closable:true,
								title:treeNode.name,
								content:'<iframe frameborder="0" height="100%" width="100%"  src="'+page+'"></iframe>'
							});
						}
					}
					
				}
				
				var setting2 = {
						data: {
							simpleData: {
								enable: true
							}
						},
						callback: {
							//beforeClick: beforeClick,
							onClick: onClick
						}
					};
				var zNodes2 =[
					 			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
					 			{ id:11, pId:1, name:"父节点11 - 折叠"},
					 			{ id:111, pId:11, name:"叶子节点111"},
					 			{ id:112, pId:11, name:"叶子节点112"},
					 			{ id:113, pId:11, name:"叶子节点113"},
					 			{ id:114, pId:11, name:"叶子节点114",name:"百度",page:'http://www.baidu.com'}
				 			];
				
		 			$(function() {
		 				$.fn.zTree.init($("#mytree2"), setting2, zNodes2);
		 				
		 			});
				</script>
				<ul id="mytree2" class="ztree"></ul>
			</div>
		</div>
	</div>
	<div  data-options="region:'center'">
		<!--tabs 选项卡面板 -->
		<div id="tabs" class="easyui-tabs" data-options="fit:true">
			<div data-options="closable:true,iconCls:'icon-add'" title="选项卡一">
				选项卡一内容
			</div>
			<div data-options="closable:true,iconCls:'icon-remove'" title="选项卡二">
				选项卡二内容
			</div>
			<div data-options="closable:true,iconCls:'icon-search'" title="选项卡三">
				选项卡三内容
			</div>
		</div>
		
	</div>
	<div data-options="region:'east'" style="width: 100px">东部区域</div>
	<div data-options="region:'south'" style="height: 50px">南部区域</div>
</body>
</html>